<template>
  <style include="cr-shared-style">
    a[href] {
      color: var(--cr-link-color);
      text-decoration: none;
    }

    .activity-message {
      color: var(--md-loading-message-color);
      font-size: 123%;  /* Should be 16px when 100% is 13px. */
      font-weight: 500;
      margin-top: 80px;
      text-align: center;
    }

    .activity-subpage-header {
      display: flex;
      justify-content: flex-end;
      padding: 12px 12px;
    }

    .activity-table-headings {
      align-items: center;
      display: flex;
      flex-direction: row;
      font-weight: 500;
      margin-inline-end: auto;

      /* Match separator height. */
      min-height: calc(var(--cr-section-min-height) - var(--separator-gap));
      padding: 0 var(--cr-section-padding);
    }

    .clear-activities-button {
      margin: 0 8px;
    }

    .page-container {
      height: 100%;
      overflow: overlay;
    }

    .page-content {
      background-color: var(--cr-card-background-color);
      box-shadow: var(--cr-card-shadow);
      box-sizing: border-box;
      margin: auto;
      min-height: 100%;
      padding-bottom: 64px;
      width: var(--cr-toolbar-field-width);
    }

    .page-header {
      align-items: center;
      display: flex;
      height: 40px;
      margin-bottom: 12px;
      padding: 8px 12px 0;
    }

    .link-icon-button {
      align-items: center;
      display: flex;
      justify-content: center;
    }

    .separator {
      border-inline-start: var(--cr-separator-line);
      flex-shrink: 0;

      /* Section height - gap. */
      height: calc(var(--cr-section-min-height) - var(--separator-gap));
      margin-inline-end: var(--cr-section-padding);

      /* Makes the tappable area fill its parent.
       * TODO(crbug.com/949697): This is an explicit reminder to override
       * once .separator styling is extracted from settings. */
      margin-inline-start: 0;
    }
  </style>
</template>
